<template>
  <div class="nvas">
    <div
      class="popover"
      v-for="item in list"
      :key="item.id"
      @click="choose(item.id)"
    >
      <!-- <div class="div"> 这是出来的内容------------------- </div> -->

      <div
        class="popoverItem"
        @mouseenter="mouseenter(item)"
        @mouseleave="mouseleave(item)"
        slot="reference"
      >
        {{ item.name }}
        <span v-if="item.hasChildren">
          <i class="el-icon-arrow-right"></i>
        </span>
      </div>
    </div>

    <div
      @mouseenter="mouseenterTow"
      @mouseleave="mouseleave"
      class="popoverContent"
      :style="`opacity: ${isshow ? 1 : 0};width: ${isshow ? '590px' : '300px'}`"
    >
      <el-link
        class="link"
        style="float: left; margin-left: 20px; margin-bottom: 20px"
        v-for="item2 in towList"
        :underline="false"
        :key="item2.id"
        @click="choose(item2.id, item2.parentId)"
        >{{ item2.name }}</el-link
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "nvas",
  props: {
    list: {
      type: Array,
    },
  },
  components: {},
  data() {
    return {
      isshow: false,
      towList: [],
    };
  },

  methods: {
    choose(id, fuID) {
      this.$emit("choose", id, fuID);
    },
    mouseenter(item) {
      if (item.hasChildren) {
        this.isshow = true;
        this.towList = item.children;
      }
    },
    mouseenterTow() {
      this.isshow = true;
    },
    mouseleave() {
      this.isshow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.popoverContent {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
}
.linkBox {
}
.nvas {
  height: 400px;
  width: 236px;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 20px;
  z-index: 99;
  padding: 8px 0 2px 8px;
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.popoverContent {
  z-index: 66;
  position: absolute;
  left: 235px;
  top: 0;
  bottom: 0;
  width: 590px;

  background-color: #fff;
  transition: all 0.2s ease;
  overflow-y: auto;
  padding: 20px 4px 4px 20px;
  box-shadow: 0 0 20px 0 hsla(0, 0%, 58%, 0.1);
}

.popoverItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 228px;
  height: 40px;
  // margin: 7px 0;
  padding: 5px 20px;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.popoverItem:hover {
  background-color: #fff;
  color: rgb(21, 107, 246);
}
</style>
